<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./assets/images/dishes-01.png" type="image/x-icon">
  <title>匹萨网站</title>
  <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet" />
  <link rel="stylesheet" href="./assets/styles.css" />
</head>

<body>
  <!-- 头部 -->
  <header class="header">
    <nav class="nav">
      <div class="container">
        <div class="nav-wrapper">
          <div class="logo">
            <h1>Pizza<span class="highlight">Day</span></h1>
          </div>

          <div class="navigation">
            <ul class="nav-menu">
              <li class="nav-item">
                <a href="#home" class="nav-link active-link">Home</a>
              </li>
              <li class="nav-item">
                <a href="#about" class="nav-link">About Us</a>
              </li>
              <li class="nav-item">
                <a href="#menu" class="nav-link">Menu</a>
              </li>
              <li class="nav-item">
                <a href="#blog" class="nav-link">Blog</a>
              </li>
            </ul>
          </div>

          <span class="mobile-menu"><i class="ri-menu-line"></i></span>
        </div>
      </div>
    </nav>
  </header>

  <!-- 主体区 -->
  <main class="main">
    <!-- home start -->
    <section id="home" class="section">
      <div class="container">
        <div class="hero-wrapper">
          <div class="hero-content">
            <h2 class="hero-title">Today's Special</h2>
            <h2 class="highlight">Italian Pizza</h2>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum
              aliquam quod minima! Vel necessitatibus ratione in unde,
              consequuntur officia illum.
            </p>
            <div class="hero-btns">
              <button class="view-more-btn">View menu</button>
              <span class="play-btn"><i class="ri-play-fill"></i></span>
            </div>
          </div>

          <div class="hero-img">
            <img src="./assets/images/hero-img.png" alt="hero image" />
          </div>
        </div>
      </div>
    </section>
    <!-- home end -->

    <!-- popular start -->
    <section class="section">
      <div class="container">
        <div class="dishes-section-top">
          <h2>Popular Dishes</h2>
        </div>

        <div class="dishes-wrapper">
          <div class="dish-item">
            <div class="dish-img">
              <img src="./assets/images/dishes-01.png" alt="dish image" />
            </div>

            <div class="dish-content">
              <h3>Papporoni Pizza</h3>
              <div class="ratings">
                <span><i class="ri-star-s-fill"></i></span>
                <span><i class="ri-star-s-fill"></i></span>
                <span><i class="ri-star-s-fill"></i></span>
                <span><i class="ri-star-s-fill"></i></span>
                <span><i class="ri-star-half-s-line"></i></span>
              </div>
              <div class="dish-content-bottom">
                <span class="dish-price">$23.99</span>
                <span class="add-to-cart"><i class="ri-shopping-cart-line"></i></span>
              </div>
            </div>
          </div>

          <div class="dish-item">
            <div class="dish-img">
              <img src="./assets/images/dishes-02.png" alt="dish image" />
            </div>

            <div class="dish-content">
              <h3>Pasta</h3>
              <div class="ratings">
                <span><i class="ri-star-s-fill"></i></span>
                <span><i class="ri-star-s-fill"></i></span>
                <span><i class="ri-star-s-fill"></i></span>
                <span><i class="ri-star-s-fill"></i></span>
                <span><i class="ri-star-half-s-line"></i></span>
              </div>
              <div class="dish-content-bottom">
                <span class="dish-price">$19.99</span>
                <span class="add-to-cart"><i class="ri-shopping-cart-line"></i></span>
              </div>
            </div>
          </div>

          <div class="dish-item">
            <div class="dish-img">
              <img src="./assets/images/dishes-03.png" alt="dish image" />
            </div>

            <div class="dish-content">
              <h3>Vegetable</h3>
              <div class="ratings">
                <span><i class="ri-star-s-fill"></i></span>
                <span><i class="ri-star-s-fill"></i></span>
                <span><i class="ri-star-s-fill"></i></span>
                <span><i class="ri-star-s-fill"></i></span>
                <span><i class="ri-star-half-s-line"></i></span>
              </div>
              <div class="dish-content-bottom">
                <span class="dish-price">$29.99</span>
                <span class="add-to-cart"><i class="ri-shopping-cart-line"></i></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- popular end -->

    <!-- about us start -->
    <section id="about" class="section">
      <div class="container">
        <div class="about-wrapper">
          <div class="about-img">
            <img src="./assets/images/burger.png" alt="about image" />
          </div>

          <div class="about-content">
            <h3>
              We pride ourselves on making real food from the best
              ingredients.
            </h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae,
              dolorem distinctio. Nulla alias excepturi aliquid.
            </p>
            <button class="learn-more"><a href="#">Learn more</a></button>
          </div>
        </div>
      </div>
    </section>
    <!-- about us end -->

    <!-- menu start -->
    <section id="menu" class="section">
      <div class="container">
        <div class="menu-section-top">
          <h2>Special Menu For You</h2>
        </div>

        <div class="menu-wrapper">
          <div class="menu-item">
            <div class="menu-img">
              <img src="./assets/images/product-01.png" alt="menu image" />
            </div>
            <h3>American Pasta</h3>
            <div class="menu-card-bottom">
              <div>
                <div class="ratings">
                  <span><i class="ri-star-s-fill"></i></span>
                  <span><i class="ri-star-s-fill"></i></span>
                  <span><i class="ri-star-s-fill"></i></span>
                  <span><i class="ri-star-s-fill"></i></span>
                  <span><i class="ri-star-half-s-line"></i></span>
                </div>
                <span class="dish-price">$29.99</span>
              </div>

              <span class="add-to-cart"><i class="ri-shopping-cart-line"></i></span>
            </div>
          </div>
          <div class="menu-item">
            <div class="menu-img">
              <img src="./assets/images/product-02.png" alt="menu image" />
            </div>
            <h3>Quintao Nuts</h3>
            <div class="menu-card-bottom">
              <div>
                <div class="ratings">
                  <span><i class="ri-star-s-fill"></i></span>
                  <span><i class="ri-star-s-fill"></i></span>
                  <span><i class="ri-star-s-fill"></i></span>
                  <span><i class="ri-star-s-fill"></i></span>
                  <span><i class="ri-star-half-s-line"></i></span>
                </div>
                <span class="dish-price">$39.99</span>
              </div>

              <span class="add-to-cart"><i class="ri-shopping-cart-line"></i></span>
            </div>
          </div>
          <div class="menu-item">
            <div class="menu-img">
              <img src="./assets/images/product-03.png" alt="menu image" />
            </div>
            <h3>Buzz Noodles</h3>
            <div class="menu-card-bottom">
              <div>
                <div class="ratings">
                  <span><i class="ri-star-s-fill"></i></span>
                  <span><i class="ri-star-s-fill"></i></span>
                  <span><i class="ri-star-s-fill"></i></span>
                  <span><i class="ri-star-s-fill"></i></span>
                  <span><i class="ri-star-half-s-line"></i></span>
                </div>
                <span class="dish-price">$9.99</span>
              </div>

              <span class="add-to-cart"><i class="ri-shopping-cart-line"></i></span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- menu end -->

    <!-- offer start -->
    <section class="section">
      <div class="container">
        <div class="offer-wrapper">
          <div class="offer-content">
            <h2>
              Get upto <span class="highlight">50%</span> offer on festival!
            </h2>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Commodi voluptas eos quidem tempora mollitia iure ratione
              corporis repellendus quasi nemo. Eligendi, repellat. Doloremque
              minus qui obcaecati nemo! Quis, molestiae. Rem?
            </p>
            <button class="view-more-btn">Order Now</button>
          </div>
          <div class="offer-img">
            <img src="./assets/images/offer.png" alt="offer image" />
          </div>
        </div>
      </div>
    </section>
    <!-- offer end -->

    <!-- blog start -->
    <section id="blog" class="section">
      <div class="container">
        <div class="blog-top">
          <h2>Our Top Recipes</h2>
        </div>

        <div class="blog-wrapper">
          <div class="blog-item">
            <div class="blog-img">
              <img src="./assets/images/recipe-01.jpg" alt="blog image" />
            </div>

            <div class="blog-content">
              <h3>Better than takeout sesame chicken</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab,
                totam!
              </p>

              <a href="#" class="read-more">Read More</a>
            </div>
          </div>

          <div class="blog-item">
            <div class="blog-img">
              <img src="./assets/images/recipe-02.jpg" alt="blog image" />
            </div>

            <div class="blog-content">
              <h3>Better than takeout sesame chicken</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab,
                totam!
              </p>

              <a href="#" class="read-more">Read More</a>
            </div>
          </div>

          <div class="blog-item">
            <div class="blog-img">
              <img src="./assets/images/recipe-03.jpg" alt="blog image" />
            </div>

            <div class="blog-content">
              <h3>Better than takeout sesame biriyani</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab,
                totam!
              </p>

              <a href="#" class="read-more">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- blog end -->

  </main>

  <!-- 底部区 -->
  <footer class="footer section">
    <div class="container">
      <div class="footer-wrapper">
        <div class="footer-logo">
          <div class="logo">
            <h1>Pizza<span class="highlight">Day</span></h1>
          </div>
          <p>Subscribe to our newsletter</p>
          <div class="subscribe-box">
            <input type="email" placeholder="Your email" />
            <button class="subscribe-btn">Subscribe</button>
          </div>
        </div>

        <div class="footer-box">
          <h3 class="footer-link-title">Information</h3>
          <ul class="footer-menu">
            <li class="footer-menu-item">
              <a href="#about" class="footer-link">About Us</a>
            </li>
            <li class="footer-menu-item">
              <a href="#" class="footer-link">Events</a>
            </li>
            <li class="footer-menu-item">
              <a href="#" class="footer-link">Career</a>
            </li>
            <li class="footer-menu-item">
              <a href="#" class="footer-link">Our Chefs</a>
            </li>
          </ul>
        </div>

        <div class="footer-box">
          <h3 class="footer-link-title">Services</h3>
          <ul class="footer-menu">
            <li class="footer-menu-item">
              <a href="#about" class="footer-link">Online Order</a>
            </li>
            <li class="footer-menu-item">
              <a href="#" class="footer-link">24/7 Support</a>
            </li>
            <li class="footer-menu-item">
              <a href="#" class="footer-link">Pre-Reservation</a>
            </li>
            <li class="footer-menu-item">
              <a href="#" class="footer-link">Foodie Place</a>
            </li>
          </ul>
        </div>

        <div class="footer-box">
          <h3 class="footer-link-title">Quick Links</h3>
          <ul class="footer-menu">
            <li class="footer-menu-item">
              <a href="#menu" class="footer-link">Menu</a>
            </li>
            <li class="footer-menu-item">
              <a href="#blog" class="footer-link">Blog</a>
            </li>
            <li class="footer-menu-item">
              <a href="#about" class="footer-link">About Us</a>
            </li>
            <li class="footer-menu-item">
              <a href="#" class="footer-link">Offer</a>
            </li>
          </ul>
        </div>

        <div class="footer-box">
          <h3 class="footer-link-title">Social</h3>
          <ul class="footer-menu">
            <li class="footer-menu-item">
              <a href="#" class="footer-link">Facebook</a>
            </li>
            <li class="footer-menu-item">
              <a href="#" class="footer-link">Instagram</a>
            </li>
            <li class="footer-menu-item">
              <a href="#" class="footer-link">Linkedin</a>
            </li>
            <li class="footer-menu-item">
              <a href="#" class="footer-link">Twitter</a>
            </li>
          </ul>
        </div>
      </div>

      <p class="footer-copyright">
        Developed by Jetwang. All rights reserved.
      </p>
    </div>
  </footer>

  <script src="./assets/main.js"></script>
</body>

</html>